feat(react): BREAKING CHANGE Upgrade to React 18 #3556

greg-in-a-box · 2024-05-21T18:59:20Z

BREAKING CHANGE

These are the following changes:

React upgraded to 18
- Updated types
- act comes from react now instead of `react-dom/test-utils
- renderHook comes from @testing-library/react instead @testing-library/react-hooks
- Updated testing libraries
- Updated peer dependency to support 17 and 18
Storybook upgraded to 8

Checklist

Validate Storybook
Validate styleguidist
Validate linters
Validate builder

tjiang-box · 2024-07-09T18:52:45Z

src/elements/content-sharing/__tests__/SharingModal.test.js

@@ -289,6 +289,7 @@ describe('elements/content-sharing/SharingModal', () => {
            expect(wrapper.exists(LoadingIndicator)).toBe(true);

            wrapper.update();
+            console.log(wrapper.debug());


remove console.log()

greg-in-a-box · 2024-07-10T19:05:56Z

scripts/jest/jest-setup.ts

+Object.defineProperty(global, 'TextEncoder', {
+    value: util.TextEncoder,
+});


error was thrown and said to add this to the setup

greg-in-a-box · 2024-07-10T19:06:58Z

src/components/checkbox/Checkbox.stories.tsx

-import { boolean } from '@storybook/addon-knobs';
-
-import { State, Store } from '@sambego/storybook-state';


both deprecated, removed from all stories

greg-in-a-box · 2024-07-10T19:07:43Z

src/components/collapsible/__tests__/__snapshots__/Collapsible.test.tsx.snap

@@ -23,28 +23,9 @@ exports[`components/collapsible/Collapsible should apply buttonProps correctly 1
      />
    </PlainButton>
  </div>
-  <AnimateHeight


updated after bumping react-animate-height to 3

greg-in-a-box · 2024-07-10T19:10:07Z

src/components/date-picker/DatePicker.stories.tsx

 import * as React from 'react';
-import { IntlProvider } from 'react-intl';


IntlProvider is handle via a storybook addon now, removed from all stories

greg-in-a-box · 2024-07-10T19:10:59Z

src/components/draft-js-editor/DraftJSEditor.stories.js

@@ -1,8 +1,7 @@
 // @flow
+/* eslint-disable react-hooks/rules-of-hooks */


added this to avoid having to capitalize all stories to and keeping this as camelcase

greg-in-a-box · 2024-07-10T19:15:22Z

src/components/link/stories/LinkButton.stories.tsx

+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore


greg-in-a-box · 2024-07-10T20:29:44Z

src/elements/content-sidebar/activity-feed/task-form/__tests__/TaskForm.test.js

+            act(() => {
+                wrapper.setState({ approvers: [approver] });
+            });
+            act(() => {
+                wrapper.instance().handleApproverSelectorSelect([newApprover]);
+            });


they need to be separated

tjuanitas · 2024-07-11T22:41:46Z

.storybook/preview.tsx

@@ -1,12 +1,13 @@
+import React from "react";


.storybook/public/mockServiceWorker.js

src/components/dropdown-menu/DropdownMenu.stories.js

tjuanitas · 2024-07-11T22:52:33Z

package.json

-        "*.js": ["eslint --fix", "git add"],
-        "*.ts": ["eslint --ext=.ts --fix", "git add"],
-        "*.tsx": ["eslint --ext=.tsx --fix", "git add"],
+        "*.js|ts|tsx": ["eslint --fix", "git add"],


where did this syntax come from? feel like it's not doing what we think it should

im seeing something like *.{js,ts,tsx} on the docs

didint know that was being used for something, thought it wa s just a label, updated in separate PR for eslint

tjiang-box · 2024-07-12T16:39:22Z

src/elements/wrappers/ContentExplorer.js

@@ -5,6 +5,8 @@
 */

 import * as React from 'react';
+// TODO switch to createRoot when upgrading to React 18


do we need a ticket to track this one

It will break on its own when we head to 19

tjuanitas · 2024-07-12T20:45:19Z

src/elements/content-sharing/stories/ContentSharing.mdx


-<Meta of={ContentSharingStories} />
+<Meta />


what's this doing now if stories is removed?

[BREAKING CHANGES] Upgrade to React 18

greg-in-a-box force-pushed the react-18 branch 2 times, most recently from 78c1408 to 7d5d2e9 Compare July 1, 2024 21:57

greg-in-a-box changed the title ~~WIP~~ feat(react): BREAKING CHANGE Upgrade to React 18 Jul 2, 2024

greg-in-a-box force-pushed the react-18 branch 2 times, most recently from ab7c72d to 926275a Compare July 8, 2024 17:24

tjiang-box reviewed Jul 9, 2024

View reviewed changes

greg-in-a-box linked an issue Jul 9, 2024 that may be closed by this pull request

Support for React 18 #3381

Closed

greg-in-a-box commented Jul 10, 2024

View reviewed changes

greg-in-a-box force-pushed the react-18 branch from f4da38b to 048f5af Compare July 10, 2024 22:10

greg-in-a-box marked this pull request as ready for review July 10, 2024 23:54

greg-in-a-box requested review from a team as code owners July 10, 2024 23:54

greg-in-a-box force-pushed the react-18 branch from 257675b to 16d77db Compare July 11, 2024 22:35

tjuanitas reviewed Jul 11, 2024

View reviewed changes

.storybook/preview.tsx Outdated

@@ -1,12 +1,13 @@

import React from "react";

Copy link

Contributor

tjuanitas Jul 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

eslint?

tjiang-box requested changes Jul 11, 2024

View reviewed changes

.storybook/public/mockServiceWorker.js Outdated Show resolved Hide resolved

src/components/dropdown-menu/DropdownMenu.stories.js Outdated Show resolved Hide resolved

tjuanitas reviewed Jul 11, 2024

View reviewed changes

greg-in-a-box force-pushed the react-18 branch 2 times, most recently from c9ed99d to a7e00bb Compare July 12, 2024 01:44

greg-in-a-box added 3 commits July 11, 2024 23:05

WIP

f426141

chore(react): unit tests

520014e

chore(react): types and unit tests

39df245

greg-in-a-box and others added 20 commits July 11, 2024 23:06

chore(react): unit tests

5f1e986

chore(react): unit tests

000851f

chore(react): storybook

f6c1bd3

feat(react-18): fix lint ts issue

ec4cb6c

chore(react): storybook

991e08c

chore(react): storybook

25b062d

chore(react): storybook

5a63ad7

chore(react): flow

1637bd0

chore(react): element test

6ee6e89

chore(react): undo makeDroppable changes

cf372ba

chore(react): unit tests

66cf44a

chore(react): unit tests

5a7b8b0

chore(react): unit tests

696a695

chore(react): clean up

96defb5

chore(react): clean up

abc4309

chore(react): rebase

dc13c71

chore(react): clean up

f2b47ec

chore(react): eslint

f40ee07

chore(react): linter ts

8855ab2

chore(react): snaps

8a0ec9d

greg-in-a-box force-pushed the react-18 branch from a7e00bb to 8a0ec9d Compare July 12, 2024 03:20

chore(react): add missing isDisabled in dropdown menu

8af6c71

tjiang-box reviewed Jul 12, 2024

View reviewed changes

tjiang-box previously approved these changes Jul 12, 2024

View reviewed changes

chore(react): deps

bb261c7

greg-in-a-box dismissed tjiang-box’s stale review via bb261c7 July 12, 2024 20:45

tjuanitas reviewed Jul 12, 2024

View reviewed changes

tjuanitas approved these changes Jul 12, 2024

View reviewed changes

greg-in-a-box merged commit 91e0978 into box:master Jul 12, 2024
7 checks passed

kajarosz pushed a commit to kajarosz/box-ui-elements that referenced this pull request Aug 21, 2024

feat(react): BREAKING CHANGE Upgrade to React 18 (box#3556)

15ca808

[BREAKING CHANGES] Upgrade to React 18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react): BREAKING CHANGE Upgrade to React 18 #3556

feat(react): BREAKING CHANGE Upgrade to React 18 #3556

greg-in-a-box commented May 21, 2024 •

edited by tjuanitas

Loading

tjiang-box Jul 9, 2024

greg-in-a-box Jul 10, 2024

greg-in-a-box Jul 10, 2024

greg-in-a-box Jul 10, 2024

greg-in-a-box Jul 10, 2024

greg-in-a-box Jul 10, 2024

greg-in-a-box Jul 10, 2024

greg-in-a-box Jul 10, 2024

tjuanitas Jul 11, 2024

tjuanitas Jul 11, 2024

greg-in-a-box Jul 11, 2024

tjiang-box Jul 12, 2024

greg-in-a-box Jul 12, 2024

tjuanitas Jul 12, 2024

		import { boolean } from '@storybook/addon-knobs';

		import { State, Store } from '@sambego/storybook-state';

		import * as React from 'react';
		import { IntlProvider } from 'react-intl';

		@@ -1,8 +1,7 @@
		// @flow
		/* eslint-disable react-hooks/rules-of-hooks */

		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
		// @ts-ignore


		<Meta of={ContentSharingStories} />
		<Meta />

feat(react): BREAKING CHANGE Upgrade to React 18 #3556

feat(react): BREAKING CHANGE Upgrade to React 18 #3556

Conversation

greg-in-a-box commented May 21, 2024 • edited by tjuanitas Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greg-in-a-box commented May 21, 2024 •

edited by tjuanitas

Loading